<script setup lang="ts">
defineOptions({
  name: "ELECTRICTITY_OPERATION_ONELINE_DIAGRAM"
});
import { ref, reactive, onMounted, defineAsyncComponent } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import { getSafeDays, updateSafeDays } from "@/api/modules/operation";
import { useFullscreen, useTransition, TransitionPresets } from "@vueuse/core";
import { queryDictData } from "@/api/common";

const { VITE_PID_AND_TOPO_URL } = import.meta.env;
const templateUrl = ref<string>("");
const router = useRouter();
const diagram = defineAsyncComponent(() => import("./components/diagram.vue"));

const clock = ref<string>("");
const clickTimer = ref<any>(null);
const operationDays = ref<number>(0);
const operationDaysVal = useTransition(operationDays, {
  duration: 1000,
  transition: TransitionPresets.easeInOutExpo
});

const getSafeDaysFn = async () => {
  const res = await getSafeDays(1);
  if (!res) return;
  const { num } = res;
  operationDays.value = num;
};

const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    clock.value = dayjs().format("YYYY/MM/DD HH:mm:ss");
  }, 1000);
};
const clearClock = () => {
  clearInterval(clickTimer.value);
};
onMounted(async () => {
  startClock();
  getSafeDaysFn();
  const allTopos = await queryDictData({ typeCode: "PID_AND_TOPO" });
  const topo = allTopos.filter(item => item.value === "ele_single_white");
  if (topo && topo.length > 0) {
    // 电科-单线图（浅色）
    templateUrl.value = `${VITE_PID_AND_TOPO_URL}` + topo[0].name;
  }
});

const toFullScreen = () => {
  const path = "/fullScreen/electricity/operation/onelineDiagram";
  const params = { path };
  const { href } = router.resolve(params);
  window.open(href, "_blank");
};
</script>

<template>
  <div class="oneline-diagram">
    <div class="oneline-diagram-title">
      <div class="one-item">{{ clock }}</div>
      <div class="one-item one-middle">电力单线图</div>
      <div class="one-item one-right">
        <div class="one-days">安全运行天数：{{ Math.round(operationDaysVal) }}天</div>
      </div>
    </div>
    <div class="oneline-diagram-content">
      <Suspense>
        <template #fallback>
          <div v-loading="true" class="diagram-loading" element-loading-background="rgba(120, 120, 120, 0.1)" />
        </template>
        <diagram :url="templateUrl" />
      </Suspense>
    </div>
    <div class="full-screen">
      <fullScreen class="icon" @click="toFullScreen" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.oneline-diagram {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;

  .oneline-diagram-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;

    .one-item {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: #555;
      letter-spacing: 4px;
    }

    .one-middle {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .one-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .oneline-diagram-content {
    flex: 1;
    width: 100%;
    min-width: 800px;
    min-height: 500px;

    .diagram-loading {
      width: 100%;
      height: 100%;
      background-color: transparent;
    }
  }

  .full-screen {
    position: absolute;
    top: -10px;
    right: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: var(--px-color-primary-light-9);
    border-radius: 4px;
    box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

    .icon {
      width: 70%;
      height: 70%;
      color: var(--px-color-primary);
    }

    &:hover {
      background-color: var(--px-color-primary-light-7);
      box-shadow: none;
    }
  }
}
</style>
